<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using StrokeCSIM()</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch10.html" title="Chapter 10. Using CSIM (Client side image maps)"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Using StrokeCSIM()</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 10. Using CSIM (Client side image maps)</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Using StrokeCSIM()"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2536011"></a>Using StrokeCSIM()</h2></div></div></div>
            
            <p>The simplest way of creating a creating a CSIM image is with the
                    <code class="code">StrokeCSIM()</code> method. As mentioned before this method actually
                returns a (small) HTML page containing both the image-tag as well as the image map
                specification. Hence it is not possible to use a script that ends with this method
                in a standard image-tags src property.</p>
            <p>There are two ways to create CSIM (or get hold of) the image maps</p>
            <div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
                    <p>Use the CSIM image script as the target in a standard anchor reference,
                        for example </p>
                    <p>
                        </p><pre class="screen">&lt;a href="mycsimscript.html"&gt; </pre><p>
                    </p>
                    <p>This has the drawback that the image page will only contain the image and
                        nothing else.</p>
                </li><li class="listitem">
                    <p>The other way will allow the image script to be included in an arbitrary
                        HTML page by just including the image script at the wanted place in the HTML
                        page using any of the standard "include" php statement. For example </p>
                    <p>
                        </p><pre class="screen">&lt;h2&gt; This is an CSIM image &lt;/h2&gt;

&lt;?php include "mycsimscript.php" ?&gt;</pre><p>
                    </p>
                </li></ol></div>
            <p>Note: If there are several CSIM images on the same page it is necessary to use
                "include_once" in the scripts for the inclusion of
                "<code class="filename">jpgraph.php</code>" and the other jpgraph library files since the
                files will be included multiple times on the same page and one or more "<span class="italic">Already defined error</span>" will be displayed.</p>
            <p>The process to replace <code class="code">Stroke()</code> with <code class="code">StrokeCSIM()</code> is
                strait forward. Replace all existing calls to <code class="code">Stroke()</code> with the
                equivalent calls to <code class="code">StrokeCSIM()</code>.</p>
            <div class="sect2" title="Optional argument to StrokeCSIM()"><div class="titlepage"><div><div><h3 class="title"><a name="id2536113"></a>Optional argument to StrokeCSIM()</h3></div></div></div>
                
                <p>Once difference compared with Stroke() is that if a filename is supplied to
                    the <code class="code">StrokeCSIM()</code> method it does not specify a file to write an
                    image to as is the case with Stroke(). The signature for the method is</p>
                <p>
                    </p><pre class="screen">StrokeCSIM($aScriptName='auto', $aCSIMName='', $aBorder=0)</pre><p>
                </p>
                <p>The first (optional) argument is the name of the actual image script file
                    including the extension. So for example if the image script is called
                        "<code class="filename">mycsimscript.php</code>" the call should be </p>
                <p>
                    </p><pre class="screen"> $graph -&gt; StrokeCSIM ( 'mycsimscript.php' ) </pre><p>
                </p>
                <p>By using the predefined name 'auto'. This will be done automatically.</p>
                <p>
                    </p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
                        <p>Why does the script name need to be used as the first parameter? The
                            reason is that in the creation of the HTML page which is sent back we
                            need to refer to the script in the image tag. In older versions of PHP
                            there where no 100% way of getting hold of the actual script name in all
                            circumstances and it was then necessary to specify it here. In PHP5 (and
                            newer version of PHP4) this is no longer a problem but this parameter is
                            still kept for backward compatibility.</p>
                    </div><p>
                </p>
                <p>The other arguments to <code class="code">StrokeCSIM()</code> are optional as well. The
                    second argument specifies the id that connect the map with the corresponding
                    image. Please note that if several CSIM images are used in the same HTML page it
                    is necessary to specify the image map name as the second parameter since all
                    image maps must be unique to properly match each image map against each image.
                    Please consult the class reference <code class="code">StrokeCSIM()</code> for more
                    details.</p>
                <p>The final argument specifies whether the image should have border or
                    not.</p>
            </div>
            <div class="sect2" title="How does StrokeCSIM() work?"><div class="titlepage"><div><div><h3 class="title"><a name="id2536192"></a>How does StrokeCSIM() work?</h3></div></div></div>
                
                <p>Knowledge of the exact technical details of the way <code class="code">StrokeCSIM()</code>
                    works is probably not needed by many people but for completeness we outline
                    those details in this short section.</p>
                <p>The fundamental issue we have to solve is that we must be able to call the
                    image script in two modes. When the user includes the image script the
                        <code class="code">StrokeCSIM()</code> method should return the HTML page but when the
                    image script is later called directly in the image tag it must not return an
                    HTML page but rather the actual image.</p>
                <p>The way this is solved is by using one <code class="code">GET</code> argument which is
                    passed on automatically when we use the image script name in the
                        <span class="markup">&lt;img&gt;</span>-tag.</p>
                <p>A look at the generated HTML from StrokeCSIM() will make this clear. In <a class="xref" href="ch10s04.html#fig.generated-csim-html-code" title="Figure 10.1. Example of generated HTML code for StrokeCSIM()">Figure 10.1. Example of generated HTML code for StrokeCSIM()</a> the resulting HTML code after
                    running the example script <code class="filename">bar_csimex1.php</code> is shown. The
                    argument to the src-property of the image tag is not simply the script name but
                    the script name with a additional argument, <code class="code">?_jpg_csimd=1</code>. This
                    argument is passed on to the library which then will run the script again but
                    this time only generate the image and not the HTML. (In the JpGraph internal
                    code this pre-defined argument is checked for and if it exists the image is send
                    back and not the HTML page.)</p>
                <p>
                    </p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
                        <p>The actual string name of this parameter is defined by a
                                <code class="code">DEFINE</code> statement in JpGraph,
                            <code class="code">_CSIM_DISPLAY</code>.</p>
                    </div><p>
                </p>
                <p>
                    </p><div class="figure"><a name="fig.generated-csim-html-code"></a><p class="title"><b>Figure 10.1. Example of generated HTML code for StrokeCSIM()</b></p><div class="figure-contents">
                        
                        <pre class="screen">&lt;map name="__mapname1828__" id="__mapname1828__" &gt;
&lt;area shape="poly" coords="74, 210, 74, 165, 92, 165, 92, 210"  href="bar_clsmex1.php#1" title="val=12" alt="val=12"  /&gt;
&lt;area shape="poly" coords="118, 210, 118, 112, 136, 112, 136, 210"  href="bar_clsmex1.php#2" title="val=26" alt="val=26"  /&gt;
&lt;area shape="poly" coords="162, 210, 162, 176, 180, 176, 180, 210"  href="bar_clsmex1.php#3" title="val=9" alt="val=9"  /&gt;
&lt;area shape="poly" coords="206, 210, 206, 146, 224, 146, 224, 210"  href="bar_clsmex1.php#4" title="val=17" alt="val=17"  /&gt;
&lt;area shape="poly" coords="250, 210, 250, 93, 268, 93, 268, 210"  href="bar_clsmex1.php#5" title="val=31" alt="val=31"  /&gt;
&lt;/map&gt;
&lt;img src="bar_csimex1.php?_jpg_csimd=1" ismap="ismap" usemap="#__mapname1828__" border="0" width="310" height="250" alt="" /&gt;
</pre>
                    </div></div><p><br class="figure-break">
                </p>
                <p>
                    </p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
                        <p>As the astute reader has come to realize CSIM scripts has a
                            performance impact in that each script has to be run twice. Once to get
                            hold of all the coordinates and generate the image and a second time via
                            the &lt;img&gt; tag in generated HTML. The library is intelligent enough to
                            minimize the code to run so that it only runs what is absolutely
                            necessary. This means that roughly 75% has to be run which yields a
                            total overhead of around 1.75 times when generating a CSIM image.</p>
                    </div><p>
                </p>
            </div>
            <div class="sect2" title="Image maps and the cache system"><div class="titlepage"><div><div><h3 class="title"><a name="id2536305"></a>Image maps and the cache system</h3></div></div></div>
                
                <p>For version 1.9 and later the cache system has been extended to include the
                    CSIM maps as well. For each CSIM graph two files are stored in the cache, the
                    image file itself as well as the wrapper HTML with the actual image map. </p>
            </div>
        </div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch10.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
